@import "./common/mixin.scss";
@import "./common/utils.scss";
@import "./common/vars.scss";

@mixin radio-size($out-size, $inner-size) {
  width: $out-size;
  height: $out-size;
  @include when(checked) {
    &:before {
      width: $inner-size;
      height: $inner-size;
    }
  }
}
// .as-radio
@include module(radio) {
  & + & {
    margin-left: 10px;
  }
  white-space: nowrap;
  display: inline-block;
  font-size: 0;
  padding: 3px 0;
  cursor: pointer;
  @include utils-user-select(none);

  @include when(disabled) {
    cursor: not-allowed;
  }

  // .as-radio__inner
  @include element(inner) {
    vertical-align: top;
    display: inline-block;
    width: $--radio-default-out-size;
    height: $--radio-default-out-size;
    box-sizing: border-box;
    border: solid 1px $--color-text-regular;
    border-radius: 50%;
    position: relative;
    &:hover {
      border-color: $--color-primary;
    }
    @include when(disabled) {
      border-color: mix(
        $--color-white,
        $--color-text-regular,
        $--color-disabled-percent
      );
      @include when(checked) {
        border-color: mix(
          $--color-white,
          $--color-primary,
          $--color-disabled-percent
        );
        &:before {
          background: mix(
            $--color-white,
            $--color-primary,
            $--color-disabled-percent
          );
        }
      }
    }
    @include when(checked) {
      border-color: $--color-primary;
      &:before {
        background: $--color-primary;
        width: $--radio-default-inner-size;
        height: $--radio-default-inner-size;
      }
    }
    &:before {
      transition: all 0.2s ease;
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      border-radius: 50%;
      width: 0;
      height: 0;
      background: $--color-text-regular;
    }
    & > input {
      display: none;
    }
  }

  @include element(label) {
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    font-size: $--radio-default-font-size;
    color: $--color-text-regular;

    margin-left: 10px;

    @include when(disabled) {
      cursor: not-allowed;

      color: mix(
        $--color-white,
        $--color-text-regular,
        $--color-disabled-percent
      );
    }
  }

  @include modifier(small) {
    .as-radio__inner {
      @include radio-size($--radio-small-out-size, $--radio-small-inner-size);
    }
    .as-radio__label {
      font-size: $--radio-small-font-size;
    }
  }

  @include modifier(mini) {
    .as-radio__inner {
      @include radio-size($--radio-mini-out-size, $--radio-mini-inner-size);
    }
    .as-radio__label {
      font-size: $--radio-mini-font-size;
    }
  }
}
